<template>
  <el-card class="box-card">
    <h2 class="titleHeader">图书管理</h2>
    <header>
      <div class="status-menu" @click="handelChangeStatus($event)">
        <span class="active-status">全部</span>
        <span>草稿</span>
      </div>
      <div class="headerRight">
        <el-select
          v-model="lableNameData"
          class="m-2"
          placeholder="默认全部"
          clearable
        >
          <el-option
            v-for="item in store.state.lableData"
            :key="item._id"
            :label="item.labelName"
            :value="item.labelName"
          />
        </el-select>
        &emsp;
        <el-input
          v-model="articleSearch"
          placeholder="搜索相关图书"
          clearable
        />
        <SendBtn @click="handleSearch">搜索</SendBtn>
      </div>
    </header>
    <ArticleTable
      :articleData="articleData"
      @updateArctileData="handleSearch"
      :count="count"
      v-if="articleData.length"
      @changePage="changePage"
    >
    </ArticleTable>
  </el-card>
</template>

<script lang="ts" setup>
import { inject, ref, defineAsyncComponent } from 'vue'
import { getArticleData } from '@/utils/articleHttp'

const ArticleTable = defineAsyncComponent(
  () => import('@/components/article/ArctileTable.vue')
)
const SendBtn = defineAsyncComponent(
  () => import('@/components/button/SendBtn.vue')
)

const store: any = inject('store')
store.GetLableData() // 获取分类标签 有就return了
const page = ref(1)
// 图书总数
const count = ref('')
// 编辑框
const lableNameData = ref('')
// 搜索框
const articleSearch = ref('')
// 图书列表
const articleData = ref([])
// 切换状态
const handelChangeStatus = (e: any) => {
  if (
    e.target.nodeName !== 'SPAN' ||
    e.target.classList.contains('active-status')
  )
    return
  document.querySelector('.active-status')?.classList.remove('active-status')
  e.target.classList.add('active-status')
  if (e.target.innerHTML == '草稿') {
    lableNameData.value = '草稿'
  } else {
    lableNameData.value = ''
  }
  getArticleDataHandler()
}

type where = {
  articleType?: string
  title?: string
}
// 上来先获取图书数据
function getArticleDataHandler() {
  let where: where = {}
  lableNameData.value.trim() && (where.articleType = lableNameData.value)
  articleSearch.value.trim() && (where.title = articleSearch.value)
  getArticleData(page.value, JSON.stringify(where)).then((res) => {
    articleData.value = res.data.info.data
    count.value = res.data.info.num
  })
}
getArticleDataHandler()

// 搜索按钮执行
const handleSearch = () => {
  getArticleDataHandler()
}
// 切换page
const changePage = (pageNum: number) => {
  page.value = pageNum
  getArticleDataHandler()
}
</script>

<style lang="scss" scoped>
header {
  display: flex;
  justify-content: space-between;
  margin: 20px;

  .headerRight {
    display: flex;
    height: 32px;

    .btnPush {
      width: 100px;
    }
  }

  .status-menu {
    font-size: 14px;
    color: #999;

    span {
      margin-right: 24px;
      cursor: pointer;
    }

    .active-status {
      color: #333;
      font-weight: 700;
    }
  }
}
</style>
